<template>
  <div class='ridio-container'>
    <van-row type='flex'
             justify='space-between'
             gutter='2'>
      <van-col span='5'>{{ cellTitle }}</van-col>
      <van-col span='8'>
        <van-radio-group v-model='logisticsType'>
          <van-radio :name='radioOneName'
                     @click='onRadio'
                     checked-color='#07c160'>{{ radioOne }}</van-radio>
        </van-radio-group>
      </van-col>
      <van-col span='8'>
        <van-radio-group v-model='logisticsType'>
          <van-radio :name='radioTwoName'
                     @click='onRadio'
                     checked-color='#07c160'>{{ radioTwo }}</van-radio>
        </van-radio-group>
      </van-col>
      <van-col @click='onTips(tips)'
               @mouseenter='onTips(tips)'
               span='2'>
        <van-icon name='info-o' />
      </van-col>
    </van-row>
  </div>
</template>
<script>
import Vue from 'vue'
import { Col, Row, CellGroup, RadioGroup, Radio, Icon } from 'vant'
Vue.use(Col).use(Row).use(CellGroup).use(Radio).use(RadioGroup).use(Icon)

export default {
  data () {
    return {
      logisticsType: true
    }
  },
  props: {
    cellTitle: { type: String, default: 'XXX' },
    radioOne: { type: String, default: '是' },
    radioTwo: { type: String, default: '否' },
    radioOneName: { type: Boolean, default: true },
    radioTwoName: { type: Boolean, default: false },
    tips: { type: String, default: 'fnjkdsn' }
  },
  methods: {
    onTips (str) {
      // console.log(str)
      // console.log(this.logisticsType)
    },
    onRadio () {
      this.$emit('getradiotype', this.logisticsType)
    }
  }
}
</script>
<style lang='scss' scoped>
.ridio-container {
  padding: .16rem .16rem;
}
</style>
